<template>
  <div class="dashboard-container">
    <!-- 现代风格渐变背景 -->
    <div class="background-gradient"></div>

    <div class="content-wrapper">
      <!-- 顶部标题和时钟 -->
      <div class="header-section">
        <h1>企业智勤通</h1>
        <div class="digital-clock">
          <div class="time">{{ currentTime }}</div>
          <div class="date">{{ currentDate }}</div>
        </div>
      </div>

      <!-- 主要内容区域 - 垂直布局 -->
      <div class="vertical-sections">
        <!-- 考勤综合统计部分 -->
        <section class="attendance-combined">
          <h2>考勤统计</h2>
          <div class="combined-content">
            <!-- 出勤率图表 -->
            <div class="attendance-rate" v-show="false">
              <div ref="rateChart" style="width: 100%; height: 400px"></div>
            </div>

            <!-- 考勤统计卡片 -->
            <div class="stats-grid">
              <div class="stat-item late" @click="showDetail('late')">
                <div class="stat-content">
                  <h3>迟到人数</h3>
                  <p>{{ statsData.late.length }}</p>
                </div>
              </div>
              <div class="stat-item leave" @click="showDetail('leave')">
                <div class="stat-content">
                  <h3>请假人数</h3>
                  <p>{{ statsData.leave.length }}</p>
                </div>
              </div>
              <div class="stat-item travel" @click="showDetail('businesstrip')">
                <div class="stat-content">
                  <h3>出差人数</h3>
                  <p>{{ statsData.businesstrip.length }}</p>
                </div>
              </div>
              <div class="stat-item normal" @click="showDetail('normal')">
                <div class="stat-content">
                  <h3>正常出勤</h3>
                  <p>{{ statsData.normal.length }}</p>
                </div>
              </div>
            </div>
          </div>

          <!-- 详情弹出框 -->
          <div v-if="showDetailModal" class="detail-modal">
            <div class="modal-content">
              <span class="close" @click="closeDetail">&times;</span>
              <h3>{{ detailTitle }}</h3>
              <div class="detail-content">
                <ul>
                  <li v-for="(person, index) in detailList" :key="index">
                    <span class="person-name">{{ person.name }}</span>
                    <span class="person-dept">{{ person.department }}</span>
                    <span v-if="currentDetail === 'late'" class="person-info">迟到时间: {{ person.time }}</span>
                    <span v-if="currentDetail === 'leave'" class="person-info">原因: {{ person.reason }}</span>
                    <span v-if="currentDetail === 'travel'" class="person-info">目的地: {{ person.destination }}</span>
                  </li>
                </ul>
              </div>
            </div>
          </div>
        </section>

        <!-- 简化后的通知公告部分 -->
        <section class="notice-section">
          <h2 @click="toggleNotices">
            管理员便签 <span :class="{'arrow-down': !showNotices, 'arrow-up': showNotices}">▼</span>
            <el-button
              v-hasPermi="['system:notification:add']"
              size="mini"
              type="primary"
              @click.stop="handleAdd"
              style="margin-left:10px"
            >
              新增
            </el-button>
          </h2>
          <transition name="fade">
            <div v-if="showNotices" class="notice-content">
              <div class="search-box">
                <input
                  type="text"
                  v-model="noticeSearchQuery"
                  placeholder="搜索公告..."
                  @input="filterNotices"
                >
                <i class="search-icon">🔍</i>
              </div>
              <ul>
                <li v-for="(notice, index) in filteredNotices" :key="index">
                  <h3>{{ notice.title }}</h3>
                  <p>{{ notice.content }}</p>
                  <div class="notice-meta">
                    <span class="notice-author">{{ notice.createBy }}</span>
                    <span class="notice-time">{{ formatTime(notice.createTime) }}</span>
                    <div class="action-buttons">
                      <el-button
                        v-hasPermi="['system:notification:edit']"
                        size="mini"
                        @click.stop="handleEdit(notice)"
                      >编辑</el-button>
                      <el-button
                        v-hasPermi="['system:notification:remove']"
                        size="mini"
                        type="danger"
                        @click.stop="handleDelete(notice)"
                      >删除</el-button>
                    </div>
                  </div>
                </li>
              </ul>
            </div>
          </transition>
        </section>

        <!-- 通讯录部分 -->
        <section class="address-book">
          <h2 @click="toggleAddressBook">
            通讯录 <span :class="{'arrow-down': !showAddressBook, 'arrow-up': showAddressBook}">▼</span>
          </h2>
          <transition name="fade">
            <div v-if="showAddressBook" class="book-content">
              <div class="search-box">
                <input
                  type="text"
                  v-model="searchQuery"
                  placeholder="搜索姓名或部门..."
                  @input="filterAddressList"
                >
                <i class="search-icon">🔍</i>
              </div>
              <table>
                <thead>
                <tr>
                  <th @click="sortBy('name')">姓名
                    <span v-if="sortKey === 'name'" class="sort-icon">
                        {{ sortOrder === 1 ? '↑' : '↓' }}
                      </span>
                  </th>
                  <th @click="sortBy('phone')">电话号码
                    <span v-if="sortKey === 'phone'" class="sort-icon">
                        {{ sortOrder === 1 ? '↑' : '↓' }}
                      </span>
                  </th>
                  <th @click="sortBy('department')">部门
                    <span v-if="sortKey === 'department'" class="sort-icon">
                        {{ sortOrder === 1 ? '↑' : '↓' }}
                      </span>
                  </th>
                </tr>
                </thead>
                <tbody>
                <tr v-for="(person, index) in filteredAddressList" :key="index">
                  <td>{{ person.name }}</td>
                  <td>{{ person.phone }}</td>
                  <td>{{ person.department }}</td>
                </tr>
                </tbody>
              </table>
              <div class="table-footer">
                共 {{ filteredAddressList.length }} 条记录
              </div>
            </div>
          </transition>
        </section>
      </div>
    </div>
    <el-dialog
      :title="formTitle"
      :visible.sync="dialogVisible"
      width="500px"
      @closed="resetForm"
    >
      <el-form ref="form" :model="form" :rules="rules" label-width="80px">
        <el-form-item label="标题" prop="title">
          <el-input v-model="form.title" placeholder="请输入标题" />
        </el-form-item>
        <el-form-item label="内容" prop="content">
          <el-input
            v-model="form.content"
            type="textarea"
            :rows="4"
            placeholder="请输入内容"
          />
        </el-form-item>
        <el-form-item label="类型" prop="notificationType">
          <el-select
            v-model="form.notificationType"
            placeholder="请选择类型"
            style="width:100%"
          >
            <el-option label="系统通知" value="1" />
            <el-option label="待办事项" value="2" />
            <el-option label="告警" value="3" />
          </el-select>
        </el-form-item>
        <el-form-item label="状态" prop="status">
          <el-select
            v-model="form.status"
            placeholder="请选择状态"
            style="width:100%"
          >
            <el-option label="未读" value="0" />
            <el-option label="已读" value="1" />
          </el-select>
        </el-form-item>
      </el-form>
      <div slot="footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="submitForm">确 定</el-button>
      </div>
    </el-dialog>
    <ai-assistant />
  </div>
</template>

<script>
  import { listAddressBook } from '@/api/system/addressbook'
  import { getAttendanceStats } from '@/api/system/attendance'
  import * as echarts from 'echarts'
  import AiAssistant from '@/components/AiAssistant'
  import {
    listNotifications,
    addNotification,
    updateNotification,
    delNotification
  } from '@/api/system/notification'

  export default {
    name: 'DashboardAdmin',
    components: {
      AiAssistant, // 添加这行
      // 其他组件...
    },
    data() {
      return {
        dialogVisible: false,
        formTitle: '',
        form: {
          notificationId: undefined,
          title: '',
          content: '',
          notificationType: '',
          status: ''
        },
        rules: {
          title: [{ required: true, message: '标题不能为空', trigger: 'blur' }],
          content: [{ required: true, message: '内容不能为空', trigger: 'blur' }],
          notificationType: [{ required: true, message: '类型不能为空', trigger: 'change' }],
          status: [{ required: true, message: '状态不能为空', trigger: 'change' }]
        },
        statsData: {
          late: [],
          leave: [],
          businesstrip: [],
          normal: []
        },
        lateList: [],
        leaveList: [],
        travelList: [],
        normalCount: 0,
        currentTime: '',
        currentDate: '',
        showAddressBook: true,
        showNotices: true,
        showDetailModal: false,
        currentDetail: '',
        detailTitle: '',
        detailList: [],
        searchQuery: '',
        noticeSearchQuery: '',
        sortKey: 'name',
        sortOrder: 1,
        addressList: [],
        filteredAddressList: [],
        notifications: [],
        filteredNotices: [],
        attendanceRate: 0
      }
    },
    computed: {
      totalEmployees() {
        return this.addressList.length
      }
    },
    mounted() {
      this.updateClock()
      setInterval(this.updateClock, 1000)
      this.getAddressList()
      this.fetchNotifications()
      this.fetchData()
    },
    methods: {
      async fetchData() {
    try {
      const response = await getAttendanceStats();
      const data = response.data;

      // 清空旧数据
      this.statsData = {
        late: [],
        leave: [],
        businesstrip: [],
        normal: []
      };

      data.forEach(item => {
        if (!item.type || !item.names || !item.dept_names) {
        console.warn('数据项缺少必要字段:', item);
        return;
      }

      const type = item.type.toLowerCase().replace(/\s/g, '');

      // 新增调试日志
      console.log('原始部门数据:', item.dept_names);

      // 处理部门数据（增加容错）
      const depts = item.dept_names
        ? item.dept_names.split(',').map(d => d.trim()).filter(d => d)
    : [];

      // 处理姓名数据
      const names = item.names.split(',').map(n => n.trim()).filter(n => n);

      // 创建人员列表（自动填充缺失部门）
      const persons = names.map((name, index) => ({
        name: name,
        department: depts[index] || depts[0] || '未知部门', // 优先取当前索引，否则取第一个部门
      // 动态字段
        ...(type === 'late' && { time: item.detail?.trim() }),
    ...(type === 'leave' && { reason: item.detail?.trim() }),
    ...(type === 'businesstrip' && { destination: item.detail?.trim() })
    }));

      // 存储到对应分类
      this.statsData[type] = persons;
    });

      this.calculateAttendanceRate();
      this.$nextTick(this.initRateChart);

    } catch (error) {
      console.error('获取考勤数据失败:', error);
      this.$message.error('获取考勤数据失败，请稍后重试');
    }
  },
  getAddressList() {
    listAddressBook().then(response => {
      this.addressList = response.data
    this.filteredAddressList = [...this.addressList]
  }).catch(error => {
      console.error("获取通讯录数据失败:", error)
  })
  },
  fetchNotifications() {
    listNotifications().then(response => {
      this.notifications = response.data
    this.filteredNotices = [...this.notifications]
  }).catch(error => {
      console.error("获取通知公告失败:", error)
  })
  },
  updateClock() {
    const now = new Date()
    this.currentTime = now.toLocaleTimeString('zh-CN', { hour12: false })
    this.currentDate = this.formatDate(now)
  },
  formatDate(date) {
    const year = date.getFullYear()
    const month = String(date.getMonth() + 1).padStart(2, '0')
    const day = String(date.getDate()).padStart(2, '0')
    const weekdays = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六']
    const weekday = weekdays[date.getDay()]
    return `${year}年${month}月${day}日 ${weekday}`
  },
  formatTime(timeString) {
    if (!timeString) return ''
    const date = new Date(timeString)
    return date.toLocaleString('zh-CN', {
      year: 'numeric',
      month: '2-digit',
      day: '2-digit',
      hour: '2-digit',
      minute: '2-digit'
    })
  },
  toggleAddressBook() {
    this.showAddressBook = !this.showAddressBook
  },
  toggleNotices() {
    this.showNotices = !this.showNotices
  },
  filterAddressList() {
    const query = this.searchQuery.toLowerCase()
    if (!query) {
      this.filteredAddressList = [...this.addressList]
      return
    }
    this.filteredAddressList = this.addressList.filter(person =>
      person.name.toLowerCase().includes(query) ||
      (person.department && person.department.toLowerCase().includes(query)) ||
      (person.phone && person.phone.includes(query))
  )
  },
  filterNotices() {
    const query = this.noticeSearchQuery.toLowerCase()
    if (!query) {
      this.filteredNotices = [...this.notifications]
      return
    }
    this.filteredNotices = this.notifications.filter(notice =>
      notice.title.toLowerCase().includes(query) ||
      notice.content.toLowerCase().includes(query)
  )
  },
  sortBy(key) {
    if (this.sortKey === key) {
      this.sortOrder *= -1
    } else {
      this.sortKey = key
      this.sortOrder = 1
    }
    this.filteredAddressList.sort((a, b) => {
      if (a[this.sortKey] < b[this.sortKey]) return -1 * this.sortOrder
    if (a[this.sortKey] > b[this.sortKey]) return 1 * this.sortOrder
    return 0
  })
  },
  calculateAttendanceRate() {
    const total = this.addressList.length
    const present = this.normalCount
    this.attendanceRate = total > 0 ? Math.round((present / total) * 100) : 0
  },
  initRateChart() {
    const chartDom = this.$refs.rateChart
    const myChart = echarts.init(chartDom)

    const option = {
      series: [{
        type: 'gauge',
        startAngle: 90,
        endAngle: -270,
        pointer: {
          show: false
        },
        progress: {
          show: true,
          overlap: false,
          roundCap: true,
          clip: false,
          itemStyle: {
            color: {
              type: 'linear',
              x: 0,
              y: 0,
              x2: 0,
              y2: 1,
              colorStops: [{
                offset: 0,
                color: '#67C23A'
              }, {
                offset: 1,
                color: '#409EFF'
              }]
            }
          }
        },
        axisLine: {
          lineStyle: {
            width: 15,
            color: [[1, '#f0f0f0']]
          }
        },
        splitLine: {
          show: false
        },
        axisTick: {
          show: false
        },
        axisLabel: {
          show: false
        },
        detail: {
          show: false
        },
        data: [{
          value: this.attendanceRate
        }]
      }]
    }

    myChart.setOption(option)
    window.addEventListener('resize', () => myChart.resize())
  },
  showDetail(type) {
    this.currentDetail = type;
    switch (type) {
      case 'late':
        this.detailTitle = '迟到人员详情';
        this.detailList = this.statsData.late; // 直接使用 statsData
        break;
      case 'leave':
        this.detailTitle = '请假人员详情';
        this.detailList = this.statsData.leave;
        break;
      case 'businesstrip':  // 统一使用后端返回的键名
        this.detailTitle = '出差人员详情';
        this.detailList = this.statsData.businesstrip;
        break;
      case 'normal':
        this.detailTitle = '正常出勤人员详情';
        this.detailList = this.statsData.normal;
        break;
    }
    this.showDetailModal = true;
  },
  closeDetail() {
    this.showDetailModal = false
  },
  // 新增按钮
  handleAdd() {
    this.formTitle = '新增通知'
    this.dialogVisible = true
  },

  // 编辑按钮
  handleEdit(notice) {
    this.formTitle = '编辑通知'
    this.form = {
      notificationId: notice.notificationId,
      title: notice.title,
      content: notice.content,
      notificationType: notice.notificationType,
      status: notice.status
    }
    this.dialogVisible = true
  },

  // 提交表单
  submitForm() {
    this.$refs.form.validate(valid => {
      if (valid) {
        if (this.form.notificationId) {
          // 直接调用导入的 updateNotification
          updateNotification(this.form).then(response => {
            this.$message.success('修改成功')
          this.fetchNotifications()
          this.dialogVisible = false
        })
        } else {
          // 直接调用导入的 addNotification
          addNotification(this.form).then(response => {
            this.$message.success('新增成功')
          this.fetchNotifications()
          this.dialogVisible = false
        })
        }
      }
    })
  },

  // 删除操作
  handleDelete(notice) {
    this.$confirm('确认删除该通知吗？', '提示', {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning'
    }).then(() => {
      // 直接调用导入的 delNotification
      delNotification(notice.notificationId).then(() => {
      this.$message.success('删除成功')
    this.fetchNotifications()
  })
  })
  },
  // 重置表单
  resetForm() {
    this.form = {
      notificationId: undefined,
      title: '',
      content: '',
      notificationType: '',
      status: ''
    }
    this.$refs.form.resetFields()
  }

  }
  }
</script>

<style lang="scss" scoped>
/* 背景样式 */
.dashboard-container {
  position: relative;
  min-height: 100vh;
  overflow-x: hidden;
  padding-bottom: 30px;
}

.background-gradient {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, #f5f7fa 0%, #e4e8eb 50%, #f0f2f5 100%);
  z-index: -1;
}

.background-gradient::before {
  content: '';
  position: absolute;
  top: -50%;
  right: -50%;
  width: 100%;
  height: 100%;
  background: radial-gradient(circle at 70% 30%, rgba(100, 149, 237, 0.08) 0%, transparent 40%);
}

.background-gradient::after {
  content: '';
  position: absolute;
  bottom: -50%;
  left: -50%;
  width: 100%;
  height: 100%;
  background: radial-gradient(circle at 30% 70%, rgba(144, 238, 144, 0.08) 0%, transparent 40%);
}

.content-wrapper {
  position: relative;
  padding: 30px;
  max-width: 1200px;
  margin: 0 auto;
}

/* 标题和时钟样式 */
.header-section {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 30px;
  flex-wrap: wrap;
}

h1 {
  text-align: center;
  color: #333;
  font-size: 28px;
  position: relative;
  font-weight: 600;
  flex: 1;
  min-width: 300px;
}

h1::after {
  content: '';
  display: block;
  width: 100px;
  height: 3px;
  background: linear-gradient(to right, #409EFF, #67C23A);
  margin: 10px auto 0;
}

.digital-clock {
  background: rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  color: #333;
  padding: 15px 25px;
  border-radius: 12px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
  text-align: center;
  min-width: 220px;
  transition: all 0.3s ease;
  border: 1px solid rgba(255, 255, 255, 0.2);
}

.time {
  font-size: 2.2rem;
  font-weight: 600;
  letter-spacing: 1px;
  margin-bottom: 5px;
  font-family: 'Arial', sans-serif;
}

.date {
  font-size: 1rem;
  opacity: 0.9;
  letter-spacing: 1px;
}

/* 主要内容区域 - 垂直布局 */
.vertical-sections {
  display: flex;
  flex-direction: column;
  gap: 30px;
}

/* 卡片通用样式 */
section {
  background: rgba(255, 255, 255, 0.85);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-radius: 12px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
  padding: 20px;
  transition: all 0.3s ease;
  border: 1px solid rgba(255, 255, 255, 0.2);
}

section:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.12);
}

h2 {
  color: #444;
  cursor: pointer;
  margin-top: 0;
  padding-bottom: 10px;
  border-bottom: 1px solid #eee;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 18px;
  font-weight: 500;
}

/* 考勤统计样式 - 现在占主体 */
.attendance-combined {
  order: -1; /* 移动到最前面 */
  flex: 1;
}

.attendance-combined h2 {
  color: #67C23A;
}

.combined-content {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.attendance-rate {
  position: relative;
  height: 200px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.rate-chart {
  width: 100%;
  height: 100%;
}

.rate-value {
  position: absolute;
  font-size: 2.5rem;
  font-weight: bold;
  color: #333;
}

/* 通知公告样式 */
.notice-section {
  background: rgba(255, 255, 255, 0.85);
  border-radius: 12px;
  padding: 20px;
  margin-bottom: 20px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
}

.notice-content ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.notice-content li {
  padding: 12px 0;
  border-bottom: 1px solid #f0f0f0;
}

.notice-content h3 {
  margin: 0 0 5px 0;
  color: #333;
  font-size: 16px;
}

.notice-content p {
  margin: 0;
  color: #666;
  font-size: 14px;
  line-height: 1.5;
}

.notice-meta {
  display: flex;
  justify-content: space-between;
  margin-top: 8px;
  font-size: 12px;
  color: #999;
}

.notice-author {
  font-style: italic;
}

.notice-time {
  font-style: italic;
}

/* 考勤统计卡片样式 */
.stats-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 15px;
}

.stat-item {
  padding: 15px;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.3s;
  display: flex;
  align-items: center;
}

.stat-item:hover {
  transform: translateY(-3px);
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
}

.stat-icon {
  font-size: 24px;
  margin-right: 15px;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background-color: rgba(255, 255, 255, 0.3);
}

.stat-content {
  flex: 1;
}

.stat-item h3 {
  margin: 0 0 5px 0;
  color: #fff;
  font-size: 14px;
  font-weight: 500;
}

.stat-item p {
  font-size: 22px;
  font-weight: 600;
  margin: 0;
  color: #fff;
}

.late {
  background: linear-gradient(135deg, #FF9A9E 0%, #FAD0C4 100%);
}

.leave {
  background: linear-gradient(135deg, #A1C4FD 0%, #C2E9FB 100%);
}

.travel {
  background: linear-gradient(135deg, #FFECD2 0%, #FCB69F 100%);
}

.travel h3, .travel p {
  color: #333;
}

.normal {
  background: linear-gradient(135deg, #a8edea 0%, #fed6e3 100%);
}

.normal h3, .normal p {
  color: #333;
}

/* 通讯录样式 */
.address-book h2:hover {
  color: #409EFF;
}

.arrow-down {
  display: inline-block;
  transition: transform 0.3s;
  font-size: 14px;
}

.arrow-up {
  display: inline-block;
  transform: rotate(180deg);
  transition: transform 0.3s;
  font-size: 14px;
}

.book-content {
  margin-top: 15px;
}

.fade-enter-active, .fade-leave-active {
  transition: opacity 0.3s, transform 0.3s;
}
.fade-enter, .fade-leave-to {
  opacity: 0;
  transform: translateY(-10px);
}

.search-box {
  position: relative;
  margin-bottom: 15px;
}

.search-box input {
  width: 100%;
  padding: 10px 15px 10px 35px;
  border: 1px solid #ddd;
  border-radius: 6px;
  font-size: 14px;
  transition: all 0.3s;
}

.search-box input:focus {
  outline: none;
  border-color: #409EFF;
  box-shadow: 0 0 0 2px rgba(64, 158, 255, 0.2);
}

.search-icon {
  position: absolute;
  left: 10px;
  top: 50%;
  transform: translateY(-50%);
  color: #999;
}

table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
  margin-bottom: 10px;
}

th, td {
  padding: 12px 15px;
  text-align: left;
  border-bottom: 1px solid #eee;
}

th {
  background-color: rgba(245, 247, 250, 0.7);
  font-weight: 500;
  color: #666;
  cursor: pointer;
  transition: all 0.3s;
}

th:hover {
  background-color: rgba(238, 241, 246, 0.7);
}

.sort-icon {
  margin-left: 5px;
  font-size: 12px;
}

.table-footer {
  padding: 10px;
  text-align: right;
  font-size: 12px;
  color: #999;
}

/* 详情弹窗样式 */
.detail-modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1000;
  animation: fadeIn 0.3s;
}

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

.modal-content {
  background: white;
  padding: 25px;
  border-radius: 12px;
  width: 90%;
  max-width: 500px;
  max-height: 80vh;
  overflow-y: auto;
  position: relative;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
}

.close {
  position: absolute;
  top: 15px;
  right: 20px;
  font-size: 24px;
  font-weight: bold;
  cursor: pointer;
  color: #999;
  transition: color 0.3s;
}

.close:hover {
  color: #333;
}

.modal-content h3 {
  margin-top: 0;
  color: #333;
  padding-bottom: 10px;
  border-bottom: 1px solid #eee;
  font-size: 18px;
}

.detail-content {
  margin-top: 15px;
}

.detail-content ul {
  list-style-type: none;
  padding: 0;
  margin: 0;
}

.detail-content li {
  padding: 10px 0;
  border-bottom: 1px solid #f0f0f0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
}

.person-name {
  font-weight: 500;
  margin-right: 8px;
  min-width: 60px;
}

.person-dept {
  color: #666;
  font-size: 13px;
  margin-right: 15px;
  background: #f5f5f5;
  padding: 2px 6px;
  border-radius: 4px;
}

.person-info {
  margin-top: 5px;
  width: 100%;
  font-size: 13px;
  color: #666;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .content-wrapper {
    padding: 15px;
  }

  .header-section {
    flex-direction: column;
    align-items: flex-start;
  }

  .digital-clock {
    margin-top: 15px;
    width: 100%;
  }

  .stats-grid {
    grid-template-columns: 1fr;
  }

  .background-gradient::before,
  .background-gradient::after {
    display: none;
  }

  .modal-content {
    width: 95%;
    padding: 15px;
  }

  .attendance-rate {
    height: 150px;
  }
}

/* 时钟浮动动画 */
@keyframes float {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-5px);
  }
}

.digital-clock:hover {
  animation: float 3s ease-in-out infinite;
}

/* 添加操作按钮样式 */
.action-buttons {
  margin-top: 8px;
  display: flex;
  gap: 8px;
}

.notice-meta {
  display: flex;
  justify-content: space-between;
  align-items: center; /* 垂直居中 */
}
</style>
